@charset "utf-8";
/* 常用变量 */
.fieldset {
  border: 1px dotted #cccccc;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #dad7d7;
  padding: 10px;
  margin-bottom: 20px;
}
.legend {
  float: left;
  width: 100%;
  margin-bottom: 15px;
}
.normal {
  width: 40%;
  float: right;
  padding: 5px;
  font-size: 20px;
  border-radius: 8px;
  border: 1px solid #cccccc;
  transition: background 0.8s ease-out;
}
.range {
  width: 40%;
  float: right;
  font-size: 14px;
}
.required {
  border: 1px solid rgba(253, 8, 8, 0.29) !important;
}
.submit {
  transition: all 1s ease;
  padding: 10px 30px;
  background-color: #b01c20;
  font-size: 30px;
  border-radius: 6px;
  box-shadow: 1px 1px 0 -1px #ffffff, 3px 3px 5px #000000;
  color: white;
  float: right;
}
article fieldset {
  border: 1px dotted #cccccc;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #dad7d7;
  padding: 10px;
  margin-bottom: 20px;
  /* 嵌套 */
}
article fieldset legend {
  float: left;
  width: 100%;
  margin-bottom: 15px;
}
article fieldset div {
  margin-bottom: 10px;
  float: left;
  width: 100%;
}
article fieldset div label {
  width: 35%;
  float: left;
}
article fieldset div textarea,
article fieldset div input:not([type="range"]):not([type="submit"]) {
  width: 40%;
  float: right;
  padding: 5px;
  font-size: 20px;
  border-radius: 8px;
  border: 1px solid #cccccc;
  transition: background 0.8s ease-out;
}
article fieldset div textarea:not([type="number"]):focus:invalid,
article fieldset div input:not([type="range"]):not([type="submit"]):not([type="number"]):focus:invalid {
  background: url('../images/wrong.png') no-repeat 98%;
}
article fieldset div textarea:not([type="number"]):focus:valid,
article fieldset div input:not([type="range"]):not([type="submit"]):not([type="number"]):focus:valid {
  background: url('../images/check.png') no-repeat 98%;
}
article fieldset div input[type="range"]:focus {
  border-radius: 15px;
  font-size: 15px;
}
article fieldset div input:required {
  border: 1px solid rgba(253, 8, 8, 0.29) !important;
}
form input[type="submit"] {
  transition: all 1s ease;
  padding: 10px 30px;
  background-color: #b01c20;
  font-size: 30px;
  border-radius: 6px;
  box-shadow: 1px 1px 0 -1px #ffffff, 3px 3px 5px #000000;
  color: white;
  float: right;
}
form input[type="submit"]:hover {
  color: #000;
  border: 1px solid #000;
  text-shadow: 0 1px #fff;
  box-shadow: 1px 1px 5px #000 inset;
}
